<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过ID使用SVG图标</title>
</head>

<body>
    <h2>
        <svg class="chr-action-icon__icon">
            <use xlink:href="#plus"></use>
        </svg>
        <svg class="chr-action-icon__icon">
            <use xlink:href="#goland"></use>
        </svg>
    </h2>


    <svg class="svg-assets" xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="0 0 32 32" id="plus" xmlns="http://www.w3.org/2000/svg">
            <path d="M25.333 17.333h-8v8h-2.666v-8h-8v-2.666h8v-8h2.666v8h8v2.666Z" />
        </symbol>
        <symbol id="plus-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M24 17.3333H17.3333V24C17.3333 24.7333 16.7333 25.3333 16 25.3333C15.2667 25.3333 14.6667 24.7333 14.6667 24V17.3333H7.99999C7.26666 17.3333 6.66666 16.7333 6.66666 16C6.66666 15.2667 7.26666 14.6667 7.99999 14.6667H14.6667V7.99999C14.6667 7.26666 15.2667 6.66666 16 6.66666C16.7333 6.66666 17.3333 7.26666 17.3333 7.99999V14.6667H24C24.7333 14.6667 25.3333 15.2667 25.3333 16C25.3333 16.7333 24.7333 17.3333 24 17.3333Z">
            </path>
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 70 70" id="goland">


            <defs>
                <lineargradient id="goland_goland_svg__a" x1="68.929" x2="41.588" y1="39.874" y2="63.009"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#087CFA"></stop>
                    <stop offset=".023" stop-color="#0D7BFA"></stop>
                    <stop offset=".373" stop-color="#5566F9"></stop>
                    <stop offset=".663" stop-color="#8A57F8"></stop>
                    <stop offset=".881" stop-color="#AB4EF7"></stop>
                    <stop offset="1" stop-color="#B74AF7"></stop>
                </lineargradient>
                <lineargradient id="goland_goland_svg__b" x1="24.089" x2="40.706" y1="21.699" y2="2.794"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#087CFA"></stop>
                    <stop offset=".023" stop-color="#0D7BFA"></stop>
                    <stop offset=".373" stop-color="#5566F9"></stop>
                    <stop offset=".663" stop-color="#8A57F8"></stop>
                    <stop offset=".881" stop-color="#AB4EF7"></stop>
                    <stop offset="1" stop-color="#B74AF7"></stop>
                </lineargradient>
                <lineargradient id="goland_goland_svg__c" x1="9.725" x2="60.22" y1="61.15" y2="28.702"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#087CFA"></stop>
                    <stop offset=".102" stop-color="#1598D3"></stop>
                    <stop offset=".225" stop-color="#23B6AA"></stop>
                    <stop offset=".345" stop-color="#2DCC8B"></stop>
                    <stop offset=".462" stop-color="#35DD74"></stop>
                    <stop offset=".572" stop-color="#39E767"></stop>
                    <stop offset=".67" stop-color="#3BEA62"></stop>
                </lineargradient>
            </defs>
            <path fill="url(#goland_goland_svg__a)" d="M61.688 27.052 70 45.572 55.708 70 38.5 42l23.188-14.948Z">
            </path>
            <path fill="#B74AF7" d="m44.5 44 11.208 26-22.093-7.583L44.5 44Z"></path>
            <path fill="url(#goland_goland_svg__b)"
                d="M49.292 19.76 44.77 0H19.615L0 30.042l5.688 13.78L0 56.438 49.292 37V19.76Z"></path>
            <path fill="url(#goland_goland_svg__c)"
                d="m70 14.875-29.385 6.927L0 56.438 26.25 70l20.708-21.365L70 14.875Z"></path>
            <path fill="#000" d="M56 14H14v42h42V14Z"></path>
            <path fill="#FFF"
                d="M34.417 48.65h-15.75v2.683h15.75V48.65ZM18 27.224c0-4.543 3.52-8.254 8.318-8.254 2.88 0 4.543.768 6.206 2.175l-2.175 2.688c-1.216-1.024-2.303-1.6-4.159-1.6-2.56 0-4.543 2.24-4.543 4.927v.064c0 2.88 1.984 4.99 4.799 4.99 1.28 0 2.367-.32 3.263-.959v-2.24H26.19v-3.007h6.846v6.847c-1.535 1.407-3.775 2.495-6.654 2.495-4.99 0-8.382-3.455-8.382-8.126ZM34.572 27.224c0-4.543 3.52-8.254 8.446-8.254 4.863 0 8.382 3.647 8.382 8.126v.064c0 4.479-3.52 8.19-8.446 8.19-4.863 0-8.382-3.647-8.382-8.126Zm13.18 0c0-2.751-1.983-4.99-4.798-4.99s-4.735 2.239-4.735 4.926v.064c0 2.687 1.984 4.99 4.799 4.99 2.815-.063 4.735-2.239 4.735-4.99Z">
            </path>
        </symbol>
    </svg>
</body>

</html>